<template>
    <div class="main-container" :class="wrap ? 'main-wrap-container' : 'main-no-wrap-container'" id="search-mixin-id">
        <main-content :title="contentTitle">
            <div slot="search" v-if="showSearchBox">
                <SearchBox v-if="showSearchBox" :searchParamsList="searchParamsList" :searchParam.sync="searchParam"
                    @searchBoxParams="searchClick" @searchReset="searchReset"></SearchBox>
            </div>
            <div slot="table">
                <!-- 在此处放置表格内容 -->
                <avue-crud ref="material_supplierTable" :data="listData" @selection-change="selectionChange"
                    id="printTable" :option="option" stripe :page.sync="page" @on-load="onPageLoad"
                    @row-dblclick="handleRowDBLClick" @sort-change="sortChange"
                    @current-row-change="handleCurrentRowChange">
                    <template slot-scope="scope" slot="menu">
                        <template v-if="scope.row.flowStatus && scope.row.flowStatus == 2">
                            <span v-if="hasBtns('createFormFlow') && hasButtonPermission('createFormFlow')"
                                class="form-span-button">{{ $t("workFlow.WFChange.approval") }}</span>
                            <el-button type="opr-primary" size="mini" icon="el-icon-view"
                                v-if="hasBtns('view') && hasButtonPermission('view')" @click="viewForm(scope.row)">
                                {{ $t("crud.viewBtn") }}</el-button>
                        </template>
                        <template v-else-if="scope.row.flowStatus && scope.row.flowStatus == 3">
                            <span v-if="hasBtns('createFormFlow') && hasButtonPermission('createFormFlow')"
                                class="form-span-button">{{ $t("forme.editModal.approvalComplete") }}</span>
                            <el-button type="opr-primary" size="mini" icon="el-icon-view"
                                v-if="hasBtns('view') && hasButtonPermission('view')" @click.stop="viewForm(scope.row)">
                                {{ $t("crud.viewBtn") }}</el-button>
                            <el-button type="opr-primary" size="mini" icon="el-icon-edit"
                                v-if="hasBtns('modify') && hasButtonPermission('modify')"
                                @click.stop="editForm(scope.row)">{{ $t("crud.editBtn") }}</el-button>
                            <el-button type="opr-primary" size="mini" icon="el-icon-delete"
                                v-if="hasBtns('delete') && hasButtonPermission('delete')"
                                @click.stop="deleteForm(scope.row)">{{ $t("crud.delBtn") }}</el-button>
                        </template>
                        <template v-else>
                            <el-button type="opr-primary" size="mini" icon="el-icon-guide"
                                v-if="scope.row.flowStatus && scope.row.flowStatus == 1 && hasBtns('createFormFlow') && hasButtonPermission('createFormFlow')"
                                @click="CreateFormFlow(scope.row)">{{ $t("forme.editModal.initiateApproval") }}
                            </el-button>
                            <el-button type="opr-primary" size="mini" icon="el-icon-guide"
                                v-if="hasBtns('createDesignFlow') && hasButtonPermission('createDesignFlow')"
                                @click="CreateDesignFlow(scope.row)">{{ $t("forme.editModal.createFormFlowBtn") }}
                            </el-button>
                            <el-button type="opr-primary" size="mini" icon="el-icon-view"
                                v-if="hasBtns('view') && hasButtonPermission('view')" @click="viewForm(scope.row)">
                                {{ $t("crud.viewBtn") }}</el-button>
                            <el-button type="opr-primary" size="mini" icon="el-icon-edit"
                                v-if="hasBtns('modify') && hasButtonPermission('modify')" @click="editForm(scope.row)">
                                {{ $t("crud.editBtn") }}</el-button>
                            <el-button type="opr-primary" size="mini" icon="el-icon-delete"
                                v-if="hasBtns('delete') && hasButtonPermission('delete')"
                                @click="deleteForm(scope.row)">
                                {{ $t("crud.delBtn") }}</el-button>
                        </template>
                    </template>
                    <template slot="menuLeft">
                        <el-button type="primary" v-if="hasButtonPermission('add')" icon="el-icon-plus" size="small"
                            @click="openForm()">{{ $t("crud.addBtn") }}</el-button>
                        <el-button type="primary" v-if="hasButtonPermission('batchDelete')" icon="el-icon-delete"
                            size="small" @click="batchDelete()">{{ $t("forme.editModal.batchDeletionBtn") }}</el-button>
                        <el-button type="primary" v-if="hasButtonPermission('print')" icon="el-icon-printer"
                            size="small" @click="printForm">{{ $t("editorModule.print") }}</el-button>
                    </template>
                </avue-crud>
                <el-dialog title="表单" :append-to-body="true" :fullscreen="true" :visible.sync="flag"
                    :class="isWorkflowForm ? 'work-form-dialog' : ''" :show-close="!isWorkflowForm">
                    <material_supplierForm ref="xtForm" v-if="flag" :isEdit="isEdit" :disabled="disabled"
                        @onChange="dialogChange" :keyValue="keyValue"></material_supplierForm>
                </el-dialog>
            </div>
        </main-content>
        <createFlow v-if="isCreateFlow" formType="2" rowPrimaryKey="F_Id" :UrlAddress="this.$options.name"
            :createFlowType="createFlowType" :row="scopeRow" :scheme="scheme" @closedCreateFlow="closedCreateFlow">
        </createFlow>
    </div>
</template>
<script>
import createFlow from '@/components/formInitiationProcess/createFlow';
import schemeMixins from '@/components/formInitiationProcess/schemeMixins';
import MainFixed from "@/page/main/MainFixed";
import authorizeMixin from "@/mixins/authorize";
import tableOptionMixin from "@/mixins/tableOption"; //table 高度计算
import tableSearchMixin from "@/mixins/tableSearch"; //table 搜索 
import MainContent from "@/page/main/MainContent";
import request from '@/router/axios';
import { baseUrl } from '@/config/env';
import { getOrder } from '@/util/util';
import material_supplierForm from './material_supplierForm';
export default {
    name: "material_supplier",
    mixins: [authorizeMixin, tableOptionMixin, tableSearchMixin, schemeMixins],
    components: { MainContent, MainFixed, material_supplierForm, createFlow },
    data() {
        return {
            btns: [
                'refresh',
                'add',
                'modify',
                'delete',
                'batchDelete',
                'print'
            ],
            page: {
                pageSize: 20,
                total: 0,
                currentPage: 1,
                layout: "total, prev, pager, next, jumper"
            },
            ids: '',
            listData: [],
            keyValue: '',
            flag: false,
            isEdit: true, // 查看-不显示按钮,
            disabled: false, // 查看-禁用input,
            isWorkflowForm: false,//默认值 false
            defaultOrderfield: '',//默认排序字段
            searchParam: {},
            defaultProps: {
                children: 'children',
                label: ''
            },
            option: {
                rowKey: 'F_Id',
                highlightCurrentRow: true,
                stripe: true,
                addBtn: false,
                tip: false,
                menuWidth: 320,
                border: true,
                page: true,
                selection: true,
                index: true,
                menu: false,
                indexLabel: this.$t('custmerForm.tableNumber'),
                align: 'center',
                menuAlign: 'left',
                delBtn: false,
                editBtn: false,
                column: [
                    {
                        sortable: true,
                        label: this.$t("职级名称"),
                        prop: 'job',
                        overHidden: true,
                    },
                    {
                        sortable: true,
                        label: this.$t("角色ID"),
                        prop: 'role_id',
                        overHidden: true,
                    },
                    {
                        sortable: true,
                        label: this.$t("角色名称"),
                        prop: 'role_name',
                        overHidden: true,
                    },
                    {
                        sortable: true,
                        label: this.$t("地区"),
                        prop: 'area',
                        overHidden: true,
                    },
                    {
                        sortable: true,
                        label: this.$t("申请人ID"),
                        prop: 'user_id',
                        overHidden: true,
                    },
                    {
                        sortable: true,
                        label: this.$t("申请时间"),
                        prop: 'apply_time',
                        overHidden: true,
                    },
                    {
                        sortable: true,
                        label: this.$t("申请人名称"),
                        prop: 'user_name',
                        overHidden: true,
                    },
                    {
                        sortable: true,
                        label: this.$t("部门简称"),
                        prop: 'depart_short_name',
                        overHidden: true,
                    },
                    {
                        sortable: true,
                        label: this.$t("部门"),
                        prop: 'depart_id',
                        overHidden: true,
                    },
                    {
                        sortable: true,
                        label: this.$t("当前用户"),
                        prop: 'current_user_id',
                        overHidden: true,
                    },
                    {
                        sortable: true,
                        label: this.$t("是否生效"),
                        prop: 'is_effective',
                        overHidden: true,
                    },
                    {
                        sortable: true,
                        label: this.$t("供应范围"),
                        prop: 'supplier_scope',
                        overHidden: true,
                    },
                    {
                        sortable: true,
                        label: this.$t("省市区"),
                        prop: 'address',
                        overHidden: true,
                    },
                    {
                        sortable: true,
                        label: this.$t(""),
                        prop: 'address_desc',
                        overHidden: true,
                    },
                    {
                        sortable: true,
                        label: this.$t("供应商名称"),
                        prop: 'supplier_name',
                        overHidden: true,
                    },
                    {
                        sortable: true,
                        label: this.$t("收款账户"),
                        prop: 'receive_account',
                        overHidden: true,
                    },
                    {
                        sortable: true,
                        label: this.$t("营业执照"),
                        prop: 'buiness_license_file_url',
                        overHidden: true,
                    },
                    {
                        sortable: true,
                        label: this.$t("安全生产许可证"),
                        prop: 'safe_license_file_url',
                        overHidden: true,
                    },
                    {
                        sortable: true,
                        label: this.$t("质检报告/检测报告"),
                        prop: 'check_file_url',
                        overHidden: true,
                    },
                ]
            }
        }
    },
    created() {
        //是否有编辑 查看 删除 发起流程 发起临时流程权限 无则为操作列不显示
        let oprBtns = ['modify', 'view', 'delete', 'createFormFlow', 'createDesignFlow'];
        let intersection = this.btns.filter((v) => oprBtns.includes(v));
        if (intersection.length > 0) {
            this.option.menu = true
        } else {
            this.option.menu = false
        }
        let querySearchData = [
            {
                name: '申请时间',
                DateField: '',
                field: 'apply_time',
                tag: 'el-input',
                lgmark: '',
            },
            {
                name: '申请人名称',
                DateField: '',
                field: 'user_name',
                tag: 'el-input',
                lgmark: '',
            },
            {
                name: '部门简称',
                DateField: '',
                field: 'depart_short_name',
                tag: 'el-input',
                lgmark: '',
            },
            {
                name: '当前用户',
                DateField: '',
                field: 'current_user_id',
                tag: 'avue-information-body',
                lgmark: '',
                __organize__: true,
                __info__: true,
                __type__: 'info',
                infoType: 'company',
            },
            {
                name: '是否生效',
                DateField: '',
                field: 'is_effective',
                tag: 'el-input',
                lgmark: '',
            },
            {
                name: '供应商名称',
                DateField: '',
                field: 'supplier_name',
                tag: 'el-input',
                lgmark: '',
            },
            {
                name: '收款账户',
                DateField: '',
                field: 'receive_account',
                tag: 'el-input',
                lgmark: '',
            },

        ]
        this.getSystemSearchList(querySearchData);
        if (this.btns.length > 0) {
            let tempBtns = this.btns.concat(oprBtns).filter((v) => this.btns.includes(v) && !oprBtns.includes(v));
            if (tempBtns.length > 0) {
                this.searchBtns = [...new Set([...tempBtns])];
            }
        }
    },
    methods: {
        handleRowDBLClick(row, event) {
            if (this.hasBtns('modify') && this.hasButtonPermission('modify') && this.openDoubleClickEdit) {
                this.editForm(row)
            }
        },
        handleCurrentRowChange(row) {
            this.$refs.material_supplierTable.toggleSelection([row]);
        },
        printForm() {
            let element = window.document.getElementById("printTable");
            setTimeout(() => {
                html2canvas(element, {
                    backgroundColor: null,
                    useCORS: true,
                    windowHeight: document.body.scrollHeight
                }).then(canvas => {
                    const url = canvas.toDataURL();
                    this.printImg = url;
                    printJS({
                        printable: url,
                        type: "image",
                        documentTitle: '打印',
                        scanStyles: false,
                        repeatTableHeader: false,
                        header: null
                    });
                });
            }, 1);
        },
        hasBtns(encode) {
            return this.btns.includes(encode);
        },
        /**发起流程 */
        CreateDesignFlow(val) {
            this.createFlowType = 0;
            this.scopeRow = val;
            this.changeSystemSchemeInfo();
        },
        CreateFormFlow(val) {
            this.createFlowType = 1;
            this.scopeRow = val;
            this.isCreateFlow = true;
        },
        /* 获取公司用户数据 */
        getListData() {
            if (!this.searchParam.order) {
                this.searchParam.orderfield = this.defaultOrderfield;
            }
            let params = this.changeSearchParams();
            request({
                url: baseUrl + '/material_supplier',
                method: 'get',
                params: params
            }).then(res => {
                this.listData = res.data.data.Rows
                this.page.total = res.data.data.Total;
            })
        },
        /* 页面加载 */
        onPageLoad(page) {
            this.searchParam.limit = page.currentPage;
            this.searchParam.size = page.pageSize;
            this.getListData();
        },
        /*查看*/
        viewForm(val) {
            this.flag = true;
            this.isEdit = false;
            this.disabled = true;
            this.keyValue = val.F_Id;
        },
        /* 编辑 */
        editForm(val) {
            this.flag = true;
            this.isEdit = true;
            this.disabled = false;
            this.keyValue = val.F_Id;
        },
        /* 打开表单 */
        openForm() {
            if (!this.isWorkflowForm) {
                //不处理工作流表单时候，表单类型重置
                window.localStorage.setItem('systemFormType', 0);
            }
            this.keyValue = null;
            this.flag = true;
            this.isEdit = true;
        },
        /* 删除 */
        deleteForm(val) {
            this.$confirm(this.$t("deletePrompt.promptContent"), this.$t("tip"), {
                confirmButtonText: this.$t("buttonModule.modalSureBtn"),
                cancelButtonText: this.$t("editorModule.cancel"),
                type: "warning",
            }).then(() => {
                request({
                    url: baseUrl + "/material_supplier/" + val.F_Id,
                    method: "delete",
                }).then((res) => {
                    this.getListData()
                    this.$notify({
                        title: this.$t("Notice.hintSuccess"),
                        message: this.$t("deletePrompt.successDeleted"),
                        type: "success",
                    });
                });
            });
        },
        /* 分页 */
        sortChange(data) {
            if (data.order) {
                let order = getOrder(data.order);
                this.searchParam.order = order;
                this.searchParam.orderfield = data.prop;
            } else {
                this.searchParam.order = asc;
                this.searchParam.orderfield = this.defaultOrderfield;
            }
            this.getListData()
        },
        /* 弹窗回调 */
        dialogChange(b) {
            this.flag = false;
            this.$nextTick(() => {
                this.getListData();
            })
        },
        /* 查询 */
        searchClick(params) {
            this.page.currentPage = 1;
            this.searchParam.limit = 1;
            this.searchParam = params;
            this.getListData()
        },
        /* 查询表单重置 */
        searchReset() {
            for (const key in this.searchParam) {
                if (this.searchParam[key]) {
                    this.searchParam[key] = null;
                }
            }
            this.getListData();
        },
        selectionChange(list) {
            this.ids = list.map((x) => x.F_Id).join(',');
        },
        batchDelete() {
            if (!this.ids || this.ids.split(",").length === 0) {
                this.$message.error(this.$t("deletePrompt.noSelected"));
                return;
            }
            this.$confirm(this.$t("deletePrompt.promptContent"), this.$t("tip"), {
                confirmButtonText: this.$t("buttonModule.modalSureBtn"),
                cancelButtonText: this.$t("editorModule.cancel"),
                type: "warning",
            }).then(() => {
                request({
                    url: baseUrl + "/material_supplier/" + this.ids,
                    method: "delete",
                }).then((res) => {
                    this.getListData();
                    this.$notify({
                        title: this.$t("Notice.hintSuccess"),
                        message: this.$t("deletePrompt.successDeleted"),
                        type: "success",
                    });
                });
            });
        },
    }
}
</script>
<style scoped>
.searchBox {
    width: calc(100% - 218px);
    display: inline-block;
}

.main-container {
    height: 100% !important;
    padding: 0 8px !important;
}

div /deep/ .custom-tree-node span {
    font-size: 14px;
    padding-left: 10px;
}

div /deep/ .custom-tree-node i {
    font-size: 12px;
}
</style>
